import React from 'react';
import { render as renderAmis } from 'amis';

class Md extends React.Component {
    state = {
        mdContent: '加载中...'
    };

    componentDidMount() {
    fetch('/md.md')  // 因为文件在 public 目录下，直接用根路径
        .then(response => response.text())
        .then(text => {
        this.setState({ mdContent: text });
        // console.log('markdown内容:', text); // 用于调试
        })
        .catch(error => {
        console.error('加载失败:', error);
        this.setState({ mdContent: '加载失败，请刷新重试' });
        });
    }
  render() {
    return renderAmis(
      {
        type: "page",
        title: "详情页1",  // 页面标题
        "regions": [
            "body"
        ],
        "body": [
        // 固定菜单
        {
        "type": "container",
        "body": [
        {
            "type": "avatar",
            "showtype": "image",
            "icon": "",
            "fit": "cover",
            "style": {
            "width": 50,
            "height": 50,
            "borderRadius": 50,
            "fontFamily": "",
            "fontSize": 12,
            "backgroundColor": "",
            "backgroundSize": "",
            "backgroundPosition": "",
            "backgroundImage": "",
            "borderLeftStyle": "solid",
            "borderTopStyle": "solid",
            "borderRightStyle": "solid",
            "borderBottomStyle": "solid",
            "marginBottom": "20px"
            },
            "id": "u:b76cb4ea45b2",
            "gap": 4,
            "onEvent": {
            "click": {
                "weight": 0,
                "actions": [
                {
                    "ignoreError": false,
                    "actionType": "refresh"
                }
                ]
            }
            },
            "src": "https://i.postimg.cc/c1KVGjw0/R.png"
        },
        {
            "type": "avatar",
            "showtype": "image",
            "icon": "",
            "fit": "cover",
            "style": {
            "width": 50,
            "height": 50,
            "borderRadius": 50,
            "fontFamily": "",
            "fontSize": 12,
            "backgroundColor": "",
            "backgroundSize": "",
            "backgroundPosition": "",
            "backgroundImage": "",
            "borderLeftStyle": "solid",
            "borderTopStyle": "solid",
            "borderRightStyle": "solid",
            "borderBottomStyle": "solid",
            "marginBottom": "20px"
            },
            "id": "u:3fe40ddbc6be",
            "gap": 4,
            "onEvent": {
            "click": {
                "weight": 0,
                "actions": [
                {
                    "ignoreError": false,
                    "actionType": "url",
                    "args": {
                    "url": "/home",
                    "blank": false
                    }
                }
                ]
            }
            },
            "src": "https://i.postimg.cc/bJPsfbFj/780.jpg"
        },
        {
            "type": "avatar",
            "showtype": "image",
            "icon": "",
            "fit": "cover",
            "style": {
            "width": 50,
            "height": 50,
            "borderRadius": 50,
            "fontFamily": "",
            "fontSize": 12,
            "backgroundColor": "",
            "backgroundSize": "",
            "backgroundPosition": "",
            "backgroundImage": "",
            "borderLeftStyle": "solid",
            "borderTopStyle": "solid",
            "borderRightStyle": "solid",
            "borderBottomStyle": "solid"
            },
            "id": "u:3aa82b01de1f",
            "gap": 4,
            "onEvent": {
            "click": {
                "weight": 0,
                "actions": [
                {
                    "ignoreError": false,
                    "actionType": "goBack"
                }
                ]
            }
            },
            "src": "https://i.postimg.cc/W4kF1Czg/power-svgrepo-com.png"
        }
        ],
        "style": {
        "position": "fixed",
        "display": "flex",
        "flexWrap": "nowrap",
        "flexDirection": "column",
        "alignItems": "center",
        "overflowX": "visible",
        "width": "80px",
        "justifyContent": "center",
        "zIndex": 1,
        "inset": "auto 10px 10px auto"
        },
        "size": "none",
        "wrapperBody": false,
        "id": "u:74e24a3d423e",
        "isFixedHeight": false,
        "isFixedWidth": true,
        "stickyPosition": "auto",
        "originPosition": "right-bottom",
        "onEvent": {
        "click": {
            "weight": 0,
            "actions": []
        }
        }
        },
        // 内容
        {
            "type": "flex",
            "items": [
              {
                "type": "container",
                "body": [],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "block",
                  "flex": "1 1 auto",
                  "flexGrow": 1,
                  "flexBasis": "0px"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:72f96b238b2b",
                "themeCss": {
                  "baseControlClassName": {
                    "background:default": "var(--colors-neutral-fill-10)"
                  }
                }
              },
              {
                "type": "container",
                "body": [
                  {
                    "type": "markdown",
                    "value": this.state.mdContent,
                    "id": "u:0af95359831a",
                    "style": {
                        "width": "100%"  // 添加这行让 markdown 内容占满容器宽度
                    }
                 }
                ],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "flex",
                  "flex": "1 1 auto",
                  "flexGrow": 2,
                  "flexBasis": "0px",
                  "flexWrap": "nowrap",
                  "justifyContent": "flex-start",
                  "flexDirection": "column",
                  "alignItems": "center"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:dee875e38002",
                "themeCss": {
                  "baseControlClassName": {
                    "padding-and-margin:default": {
                      "paddingTop": "1.375rem",
                      "paddingRight": "1.375rem",
                      "paddingBottom": "1.375rem",
                      "paddingLeft": "1.375rem"
                    },
                    "background:default": "var(--colors-neutral-fill-11)"
                  }
                }
              },
              {
                "type": "container",
                "body": [],
                "size": "none",
                "style": {
                  "position": "static",
                  "display": "block",
                  "flex": "1 1 auto",
                  "flexGrow": 1,
                  "flexBasis": "0px"
                },
                "wrapperBody": false,
                "isFixedHeight": false,
                "isFixedWidth": false,
                "id": "u:e5c158e0e23c",
                "themeCss": {
                  "baseControlClassName": {
                    "background:default": "var(--colors-neutral-fill-10)"
                  }
                }
              }
            ],
            "style": {
              "position": "relative",
              "rowGap": "10px",
              "columnGap": "10px",
              "flexWrap": "nowrap",
              "inset": "auto",
              "overflowY": "hidden",
              "height": "100%",
              "alignItems": "stretch"
            },
            "id": "u:1f3e2604fa9c",
            "isFixedHeight": true,
            "isFixedWidth": false,
            "themeCss": {
              "baseControlClassName": {
                "padding-and-margin:default": {
                  "marginTop": "var(--sizes-size-0)"
                }
              }
            }
          }
        ],
        "style": {
            "height": "100vh",
            "overflow": "scroll",
            "background": "var(--colors-neutral-fill-10)"
        }
    }
    );
  }
}

export default Md;